<template>
	<view class="con">
		<view class="title">请选择您要反馈的问题类型</view>
		<view class="box">
			<view class="item" :class="{'active':type==1}" @click="problem(1)">软件使用问题</view>
			<view class="item" :class="{'active':type==2}" @click="problem(2)">商城商品问题</view>
			<view class="item" :class="{'active':type==3}" @click="problem(3)">市场交易问题</view>
			<view class="item" :class="{'active':type==4}" @click="problem(4)">新用户问题</view>
			<view class="item" :class="{'active':type==5}" @click="problem(5)">积分CGC问题</view>
			<view class="item" :class="{'active':type==6}" @click="problem(6)">其他问题</view>
		</view>
		<view class="inputbox">
			<textarea placeholder='请描述您的问题以便我们尽快为您处理（必填）' placeholder-style="font-size: 28rpx" :maxlength="-1" v-model="text"></textarea>
			<view class="imgbox">
				<view class="border" v-if="imgList.length>0" v-for="(item,index) in imgList">
					<image :src="item" mode="aspectFill" class="img"></image>
					<view class="del" @click="del(index)">
						<u-icon name="close" color="#999" size="20"></u-icon>
					</view>
				</view>
				<view class="border" @click="upImg" v-if="imgList.length<5"><u-icon name="photo" color="#999" size="60"></u-icon></view>
			</view>
		</view>
		<view class="btn" @click="submit">
			提交反馈
		</view>
	</view>
</template>

<script>
	import {userFeedback} from "../../api/user.js"
	export default{
		data(){
			return{
				type:1,
				text:'',
				flag:true,
				imgList:[]  //图片列表
				
			}
		},
		methods:{
			problem(e){
				this.type=e
			},
			// 上传图片
			upImg() {
				this.upimg((res) => {
				console.log(res)
				this.imgList.push(res)
				}, 1)
			},
			del(index){
				this.imgList.splice(index,1)
			},
			// 提交反馈
			submit(){
				if(this.text.trim()!=''){
					let data={
						questionType:this.type,
						problemCategory:this.text,
						problemImage:this.imgList.join(',')
					}
					this.post(userFeedback,data).then(res=>{
						console.log(res)
						this.msg('提交成功','none')
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1500)
					})
				}else{
					this.msg('描述不能为空','none')
				}
				
			}
		}
	}
</script>

<style>
	.del{
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		background-color: #FFFFFF;
		width:30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
	}
	.img{
		display: block;
		width: 120rpx;
		height: 120rpx;
	}
	.border{
		display: flex;
		align-items: center;
		justify-content: center;
		/* border: 1px #999 solid; */
		width: 120rpx;
		height: 120rpx;
		background-color: #F6F6F6;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		position: relative;
	}
	.imgbox{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.btn{
		width: 690rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		opacity: 1;
		border-radius: 35rpx;
		color: #FFf;
		line-height: 70rpx;
		text-align: center;
		margin-top: 60rpx;
	}
	textarea{
		width: 100%;
	}
	.inputbox{
		background-color: #FFFFFF;
		padding: 20rpx;
	}
	.item{
		height: 60rpx;
		border: 1px solid #F09238;
		opacity: 1;
		border-radius: 30px;
		padding: 0 20rpx;
		color: #F09238;
		text-align: center;
		line-height: 60rpx;
		margin: 10rpx;
	}
	.active{
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		opacity: 1;
		border-radius: 30px;
		color: #FFFFFF;
	}
	.box{
		display: flex;
		flex-wrap: wrap;
	}
	.title{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 60rpx;
		color: #333333;
		opacity: 1;
	}
	.con{
		background-color:#F6F6F6;
		min-height: 100vh;
		padding: 0 30rpx;
		padding-top: 40rpx;
	}
</style>
